<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ include file="/include/service-base-header.jsp" %>
    <title>recharge</title>

</head>
<body>
<div class="wrapper">
    <jsp:include page="/include/left_menu.jsp">
        <jsp:param name="index" value="1"/>
    </jsp:include>
    <div class="main-panel">
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <div class="navbar-wrapper" style="padding-top: 0.5rem;padding-bottom: 0.5rem">
                    <a href="${pageContext.request.contextPath}/s/user.do"
                       style="font-size: 1rem;margin-left: 0.3rem">会员中心</a>
                    <span style="font-size: 1rem"> &nbsp;/&nbsp;充值明细</span>
                </div>
            </div>
        </nav>
        <div class="container-fluid" style="margin-top: 1rem">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-plain">
                        <div class="card-header card-header-primary">
                            <div class="card-title">充值列表</div>
                            <p class="card-category">会员充值记录</p>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table" id="table">
                                    <thead class=" text-primary">
                                    <tr>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            #
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            订单号
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            充值账户
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            充值时间
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            充值金额
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            奖励金额
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            充值方式
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            状态
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody id="tb1">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <nav aria-label="page">
                        <ul class="pagination justify-content-center" id="p1">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="loginModal" tabindex="-1" role="">
        <div class="modal-dialog modal-login" role="document">
            <div class="modal-content">
                <div class="card card-signup card-plain">

                    <div class="modal-body">
                        <button type="button" class="close mt-4" data-dismiss="modal" aria-hidden="true"><i
                                class="material-icons">clear</i></button>

                        <form class="form" method="" action="">
                            <p class="description  mt-4 ml-4" style="font-size: 1.2rem">会员信息</p>
                            <div class="card-body">
                                <div>
                                    <div class="input-group">
                                        <span type="text" style="margin-top: 0.5rem;">name：</span>
                                        <span type="text" style="margin-top: 0.5rem;display: none" id="userId"></span>
                                        <span type="text" style="margin-top: 0.5rem;display: none"
                                              id="userState"></span>
                                        <span type="text" style="margin-left: 0.5rem;margin-top: 0.5rem;"
                                              id="name"></span>
                                    </div>
                                    <div class="input-group">
                                        <span type="text" style="margin-top: 0.5rem;">ID Number：</span>
                                        <span type="text" style="margin-left: 0.5rem;margin-top: 0.5rem;" id="id_card">value</span>
                                    </div>
                                    <div class="input-group">
                                        <span type="text" style="margin-top: 0.5rem;">email：</span>
                                        <span type="text" style="margin-left: 0.5rem;margin-top: 0.5rem;" id="email">value</span>
                                    </div>
                                    <div class="input-group">
                                        <span type="text" style="margin-top: 0.5rem;">Address1：</span>
                                        <span type="text" style="margin-left: 0.5rem;margin-top: 0.5rem;" id="address">value</span>
                                    </div>
                                    <div class="input-group">
                                        <span type="text" style="margin-top: 0.5rem;">Address2：</span>
                                        <span type="text" style="margin-left: 0.5rem;margin-top: 0.5rem;"
                                              id="address_two">value</span>
                                    </div>
                                    <div class="input-group">
                                        <span type="text" style="margin-top: 0.5rem;">Town/City：</span>
                                        <span type="text" style="margin-left: 0.5rem;margin-top: 0.5rem;" id="city">value</span>
                                    </div>
                                    <div class="input-group">
                                        <span type="text" style="margin-top: 0.5rem;">Province：</span>
                                        <span type="text" style="margin-left: 0.5rem;margin-top: 0.5rem;" id="province">value</span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer justify-content-center" style="padding-bottom: 1rem">
                        <button onclick="getColumnDetailPwd()" class="btn btn-info" style="margin-right: 2rem">重置密码
                        </button>
                        <button onclick="getColumnDetail()" class="btn btn-info" style="margin-left: 2rem"
                                id="prohibition_and_open"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<script>
    var page_count = 10;
    function findAllRechargeInfo() {
        var userId = baseFn.getQueryString('userId');
        $.ajax({
            url: baseUrl.base + baseUrl.rechargeInfo + "/findAllRechargeInfo",
            type: 'get',
            data: {'userId': userId, "flag": 2},
            success: function (data) {
                if (data.code == "0") {
                    var res = data.results.rechargeInfoList;
                    cutPagination(1, res);
                    $("#p1").pagination({
                        totalData: res.length,
                        showData: page_count,
                        callback: function (idx) {
                            cutPagination(idx, res);
                        }
                    });
                } else {
                    var res = data.msg;
                    showNotification('bottom', 'right', res);
                }
            }
        });
    };
    findAllRechargeInfo();

    /**
     * 分页
     * @param page 从1开始
     */
    function cutPagination(page, res) {
        var start = (page - 1) * page_count;
        var end = start + page_count;
        if (end > res.length) {
            end = res.length;
        }
        $("#table tbody").html("");
        for (var i = start; i < end; i++) {
            var tr = document.createElement("tr");

            var td = document.createElement("td");
            var tdContent = document.createTextNode(i + 1);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            var phone = document.createTextNode((res[i].rechargeNumber));
            td.appendChild(phone);
            tr.appendChild(td);

            td = document.createElement("td");
            var phone = document.createTextNode((res[i].userPhone));
            td.appendChild(phone);
            tr.appendChild(td);

            td = document.createElement("td");
            var phone = document.createTextNode(timestampToTime(res[i].createTime));
            td.appendChild(phone);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(res[i].rechargeMoney);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(res[i].rechargeRewardMoney);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(res[i].paymentType);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            if (res[i].rechargeState == 1) {
                tdContent = document.createTextNode("充值成功");
            } else {
                tdContent = document.createTextNode("充值失败");
            }
            td.appendChild(tdContent);
            tr.appendChild(td);

            document.getElementById("tb1").append(tr);
            document.getElementById("tb1").innerHTML;
        }
    }

    //  封禁 或者  开启
    function getColumnDetail() {
        var datas = {}
        var systemUserId = "<%=session.getAttribute("systemUserId")%>";
        datas.accountNumberId = systemUserId;
        datas.userId = $("#userId").text();
        if ($("#userState").text() == 1) {
            datas.userStatus = 0;
        } else {
            datas.userStatus = 1;
        }
        $.ajax({
            url: baseUrl.base + baseUrl.user + "/updateUserInfo",
            type: 'get',
            data: datas,
            success: function (data) {
                if (data.code == "0") {
                    $("#loginModal").fadeOut();
                    findUserInfoList();
                }
            }
        })
    };

    // 重置密码
    function getColumnDetailPwd() {
        var datas = {}
        datas.userId = $("#userId").text();
        $.ajax({
            url: baseUrl.base + baseUrl.user + "/updatePassword",
            type: 'get',
            data: datas,
            success: function (data) {
                if (data.code == "0") {
                    $("#loginModal").fadeOut();
                }
            }
        })
    };


    function cashDeatils(column) {
        column.style.color = "#f44336"; //将被点击的单元格设置为蓝色
        alert(column.innerHTML); //弹出被点单元格里的内容
    }

    //获取用户详情
    function findUserInfo(column) {
        column.style.color = "#f44336";
        var userId = column.getAttribute("userId");
        $.ajax({
            url: baseUrl.base + baseUrl.user + "/findUserInfo",
            type: 'get',
            data: {"userId": userId},
            success: function (data) {
                if (data.code == "0") {
                    var userInfo = data.results;
                    if (userInfo.userStatus == 1) {
                        $("#prohibition_and_open").html('&nbsp; &nbsp; &nbsp; 封禁 &nbsp; &nbsp; &nbsp; ');
                    } else {
                        $("#prohibition_and_open").html('&nbsp; &nbsp; &nbsp; 开启 &nbsp; &nbsp; &nbsp;');
                    }
                    $("#name").html(userInfo.userName);
                    $("#id_card").html(userInfo.userName);
                    $("#email").html(userInfo.userName);
                    $("#address").html(userInfo.userName);
                    $("#address_two").html(userInfo.userName);
                    $("#city").html(userInfo.userName);
                    $("#province").html(userInfo.userName);
                    $("#userId").html(userInfo.userId);
                    $("#userState").html(userInfo.userStatus);
                }
            }
        })
    }
</script>
</html>